import { useContext } from "react";

import { CartContext } from "../../contexts/cart.context";

import Button, { BUTTON_TYPE_CLASSES } from "../button/button.component";

import {
  ProductCartContainer,
  Footer,
  Name,
  Price,
} from "./product-card.styles";

const ProductCard = ({ product }) => {
  const { title, size, price, image, phone, unit_price, area, floor } = product;
  const { addItemToCart } = useContext(CartContext);

  const addProductToCart = () => addItemToCart(product);
  const showphone = () => {
    alert(`当前意向购买的是标题为"${title}的房源"，
  房主联系方式为${phone},
  线下看房咨询请自行联系房主
    `);
  };
  const showdetail = () => {
    let str = `当前房源的详细信息如下：
    房源描述： ${title}
    房型       ${size}
    楼层      ${floor}
    房子大小   ${area}
    价格      ${price}  注意： 租房价格为每月价格
    平方米价格       ${unit_price}
    `;
    alert(str);
  };
  return (
    <ProductCartContainer>
      <img src={image} alt={`${title}`} />
      <Footer>
        <Name>{title}</Name>
        <div>{size}</div>
        <Price>{price}万</Price>
      </Footer>
      <Button
        className="detail"
        buttonType={BUTTON_TYPE_CLASSES.inverted}
        onClick={showdetail}
      >
        详情
      </Button>

      <Button
        className="kl"
        buttonType={BUTTON_TYPE_CLASSES.inverted}
        onClick={showphone}
      >
        咨询
      </Button>

      <Button
        buttonType={BUTTON_TYPE_CLASSES.inverted}
        onClick={addProductToCart}
      >
        中意
      </Button>
    </ProductCartContainer>
  );
};

export default ProductCard;
